<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
    <meta name="renderer" content="webkit" />
    <title>主页</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <!--<link href="common/bootstrap/css/bootstrap.min.css" rel="stylesheet" />-->
    <!--<link href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css" rel="stylesheet" />-->
    <script type="text/javascript" src="common/jquery/jquery-3.3.1.js"></script>

    <link href="common/main/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" />
    <style>
        html{
            /*background-color: #f6f7f7;*/
        }
        .div-center{
            margin: 100px auto;
            /*background-color: #f6f7f7;*/
        }
        .elegant-aero {
            margin-left:auto;
            margin-right:auto;
            max-width: 600px;
            /*background: #D2E9FF;*/
            /*background-color: #f6f7f7;*/
            padding: 20px 20px 20px 20px;
            font: 12px Arial, Helvetica, sans-serif;
            color: #666;
        }
        .elegant-aero h1 {
            font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
            padding: 10px 10px 10px 20px;
            display: block;
            /*background: #C0E1FF;*/
            /*background-color: #f6f7f7;*/
            border-bottom: 1px solid #B8DDFF;
            margin: -20px -20px 15px;
        }
        .elegant-aero h1>span {
            display: block;
            font-size: 11px;
        }

        .elegant-aero label>span {
            float: left;
            margin-top: 10px;
            color: #5E5E5E;
        }
        .elegant-aero label {
            display: block;
            margin: 0px 0px 5px;
        }
        .elegant-aero label>span {
            float: left;
            width: 20%;
            text-align: right;
            padding-right: 15px;
            margin-top: 10px;
            font-weight: bold;
        }
        .elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select {
            color: #888;
            width: 70%;
            padding: 0px 0px 0px 5px;
            border: 1px solid #C5E2FF;
            background: #FBFBFB;
            outline: 0;
            -webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
            box-shadow: inset 0px 1px 6px #ECF3F5;
            font: 200 12px/25px Arial, Helvetica, sans-serif;
            height: 30px;
            line-height:15px;
            margin: 2px 6px 16px 0px;
        }
        .elegant-aero textarea{
            height:100px;
            padding: 5px 0px 0px 5px;
            width: 70%;
        }
        .elegant-aero select {
            background: #fbfbfb no-repeat right;
            background: #fbfbfb no-repeat right;
            appearance:none;
            -webkit-appearance:none;
            -moz-appearance: none;
            text-indent: 0.01px;
            text-overflow: '';
            width: 70%;
        }
        .elegant-aero .button{
            padding: 10px 30px 10px 30px;
            background: #66C1E4;
            border: none;
            color: #FFF;
            box-shadow: 1px 1px 1px #4C6E91;
            -webkit-box-shadow: 1px 1px 1px #4C6E91;
            -moz-box-shadow: 1px 1px 1px #4C6E91;
            text-shadow: 1px 1px 1px #5079A3;

        }
        .elegant-aero .button:hover{
            background: #3EB1DD;
        }
    </style>
</head>
<body>
    <div class="div-center">
        <form action="" method="post" class="elegant-aero">
            <h1>
                gdfg
                <span>sdsd</span>
            </h1>
            <input id="cate-id" type="text" hidden>
            <input id="pcata-id" type="text" hidden value="0"><!--默认为0-->
            <label>
                <span>栏目名称 :</span>
                <input id="name" type="text" name="cateName" placeholder="栏目名称" />
            </label>
            <label>
                <span>排序 :</span>
                <input id="order" type="text" name="order" placeholder="排序" />
            </label>

            <label>
                <span>链接地址 :</span>
                <input id="cateURL" type="text" placeholder="链接地址" />
            </label>
            <label>
                <span>图标 :</span>
                <input id="icon" type="text" placeholder="图标" />
            </label>
            <label>
                <span>是否启用 :</span>
                <input id="status" type="text" placeholder="是否启用" />
            </label>
            <label>
                <span>标记 :</span>
                <textarea id="mark" name="message" placeholder="标记"></textarea>
            </label>
            <!--
            <label>
                <span>Subject :</span><select name="selection">
                <option value="Job Inquiry">Job Inquiry</option>
                <option value="General Question">General Question</option>
            </select>
            -->
            </label>
            <label>
                <span>&nbsp;</span>
                <input type="button" class="button" value="Send" />
            </label>
        </form>
    </div>
    <script>
        $(function() {
            var cateId = getQueryString("cateId");
            var op = getQueryString("op");
            if(op == "add"){
                if(cateId){
                    $("#pcata-id").val(cateId);
                }
            }else if(op == "update"){
                $.ajax({
                    url: "/sys/menu/getMenu",
                    method: "post",
                    data: {id: cateId},
                    success: function(data) {
                        if(data.messageCode == "001"){
                            $("#name").val(data.data.name);
                            $("#cate-id").val(data.data.id);
                            $("#pcata-id").val(data.data.parentId);
                            $("#order").val(data.data.sortNo ? data.data.sortNo : " ");
                            $("#cateURL").val(data.data.href ? data.data.href : " ");
                            $("#icon").val(data.data.icon ? data.data.icon : " ");
                            $("#status").val(data.data.status ? data.data.status : " ");
                            $("#mark").val(data.data.mark ? data.data.mark : " ");
                        }
                    }
                });
            }


            $(".button").on("click",function(){
                var id = $("#cate-id").val();
                var name = $("#name").val();
                var parentId = $("#pcata-id").val();
                var sortNo = $("#order").val();
                var href = $("#cateURL").val();
                var icon = $("#icon").val();
                var status = $("#status").val();
                var mark = $("#mark").val();
                $.ajax({
                    url: "/sys/menu/op",
                    method: "post",
                    data: {
                        id: id,
                        name:name,
                        parentId:parentId,
                        sortNo:sortNo,
                        href:href,
                        icon:icon,
                        status:status,
                        mark:mark,
                        op: op
                    },
                    success:function(data) {
                        console.log(data)
                    }
                })
            });

            function getQueryString(name) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
                var r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    return unescape(r[2]);
                }
                return null;
            }
        })
    </script>
</body>
</html>